<template>
  <div class="w-full h-full p-3 flex flex-col gap-4">
    <!--头像-->
    <div class="text-center">
      <AvatarUpload :src="groupInfo.avatar" @done="(result) => (groupInfo.avatar = result)" />
    </div>
    <!--资料-->
    <el-form :model="groupInfo">
      <el-form-item label="群名称" prop="name">
        <el-input v-model="groupInfo.name" autocomplete="off" maxlength="10" show-word-limit type="text" />
      </el-form-item>
      <el-form-item label="群描述" prop="description">
        <el-input
          v-model="groupInfo.description"
          :rows="4"
          autocomplete="off"
          maxlength="50"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
      <div class="text-end">
        <el-button size="small">取消</el-button>
        <el-button size="small" type="primary" @click="Confirm">确认</el-button>
      </div>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, toRaw } from "vue";
import { IGroupListItem, IUpdateGroupInfoParams } from "@/types/group.ts";
import AvatarUpload from "@/components/AvatarUpload/index.vue";
import { UpdateGroupInfo } from "@/api/group.ts";
import { ElMessage } from "element-plus";
import { useChat } from "@/store/modules/chat.ts";
import { useSession } from "@/store/modules/session.ts";
import { useCache } from "@/store/modules/cache.ts";
const cache = useCache();
const chat = useChat();
const session = useSession();
const emit = defineEmits<{
  (e: "cancel"): void;
}>();

const props = withDefaults(defineProps<{ GroupInfo: IGroupListItem }>(), {});
let groupInfo = reactive<IUpdateGroupInfoParams>({
  groupId: props.GroupInfo.id,
  avatar: props.GroupInfo.avatar,
  name: props.GroupInfo.name,
  description: props.GroupInfo.description,
});

// 点击确认
async function Confirm() {
  if (!chat.ChatObject) return;
  let res = await UpdateGroupInfo(toRaw(groupInfo));
  if (!res || res.status != 200) return;
  const { name, avatar } = groupInfo;
  Object.assign(chat.ChatObject, { name, avatar });
  cache.UpdateGroupListByFiled(chat.ChatObject.id, { name, avatar });
  session.UpdateSessionByField(chat.ChatObject.sessionId, { name, avatar });
  ElMessage.success("更新成功");
  emit("cancel");
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
  margin: 15px 0;
  background-color: var(--bg-form-item);
  padding: 3px 8px;
  border-radius: 5px;

  .el-input,
  .el-input__wrapper,
  .el-select__wrapper {
    border: none;
    box-shadow: none;
    width: 100%;
  }

  .el-textarea,
  .el-textarea__inner {
    resize: none;
    border: none;
    box-shadow: none; /* 移除阴影 */
  }
}
</style>
